<template>
    <div class="quick-box">
        <div class="quick-operation shadow">
            <div class="quick">
                <t-button size="mini" :disabled="!undoRedo.canUndo()" theme="" variant="text" @click="undo()"><t-icon name="rollback" ></t-icon></t-button>
            </div>
            <div class="quick">
                <t-button size="mini" :disabled="!undoRedo.canRedo()" theme="" variant="text" @click="redo()"><t-icon name="rollfront" ></t-icon></t-button>
            </div>
            <div class="quick" v-show="showLock">
                <t-button size="mini" theme="" variant="text" @click="changeLocked">
                    <t-icon :name="locked.modelValue === true?'lock-on':'lock-off'" ></t-icon>
                </t-button>
            </div>
        </div>
        <div class="quick-operation shadow">
            <div class="quick">
                <t-button size="mini" theme="" variant="text" @click="zoomToFit"><t-icon name="fullscreen-1" ></t-icon></t-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useEditor } from '@/views/Editor/app'
import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
import {isDefined} from "@vueuse/core";
import {typeUtil} from "@/views/Editor/utils/utils";

const { editor, keybinding,undoRedo } = useEditor()
const locked = useActiveObjectModel('locked')
const undo = () => {
    keybinding.trigger('mod+z')
}
const redo = () => {
    keybinding.trigger('mod+y')
}
const zoomToFit = () => {
    editor.zoomToFit()
}

const changeLocked = () => {
  locked.value.onChange(!locked.value.modelValue)
  if (locked.value.modelValue){
    editor.activeObject.value.hittable = false
  }else {
    editor.activeObject.value.hittable = true
  }
}

const showLock = computed(() => {
    const activeObject = editor.activeObject.value
    return isDefined(activeObject) && !typeUtil.isVirtualOrBottom(activeObject)
})

</script>


<style scoped lang="less">
.quick-box {
    position: absolute;
    bottom: 80px;
    right: 10px;
    display: flex;
    padding: 0 8px;
}
.quick-operation {
    font-size: 20px;
    border-radius:8px;
    width: fit-content;
    background-color: #fff;
    align-items: center;
    height: 35px;
    display: flex;
    padding: 0 4px;
  .quick{
    width: 30px;
    height: 100%;
    text-align: center;
    color: rgb(55 65 81,1);
  }
  .disable{
    color: rgb(107 114 128,1);
  }
}
.quick-operation:not(:last-child) {
  margin-right: 8px;
}
.shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
</style>
